<!-- 关于我们 -->
<template>
    <headerView></headerView>
    <div class="aboutView">
        <div class="banner">
            <!-- <img src="../../assets/images/marketing-braner.png" alt=""> -->
            <video autoplay="autoplay" loop="loop" muted class="video-home" ref="videoRef"
                src="http://www.wanwutong.com/home-video.mp4" preload="auto"></video>
            <div class="banner-text">
                <h2 class="h2"><span>万物通 供应链</span></h2>
                <p>数字供应链供销一体化</p>
                <div class="banner-btn">
                    <div class="el-button cursor" @click="goodsLogin">选品中心</div>
                    <div class="el-button cursor" @click="shuzidap"> 数字大屏</div>
                </div>
            </div>
        </div>
        <!-- 关于万物通 s -->
        <div class="andConter center-text">
            <h3 class="title">关于万物通</h3>
            <div class="intro-one">
                <img src="../../assets/images/andMy-one1.png" alt="">
                <div class="intro-right">
                    <h4><span>公司简介</span></h4>
                    <p> 万物通，通万物！二类电商优质供应商！ </p>
                    <p>
                        万物通供应链：万物通供应链，聚焦于二类电商平台，货盘稳定，品类齐全，服务高效！专注服务于政企福利平台，
                        银行、航空等内部商城、私域电商的货品供应及数实融合的供应链解决方案！
                    </p>
                    <p>
                        万物通SCM：万物通凭借强大的供应商管理体系及深厚品牌沉淀，已经实现供应链管理的数字化转型。
                        通过融合线上线下资源，借用自主开发的SCM管理系统，已成功实现从采购、生产、仓储、物流到销售等各个环节的信息透明化和协同运作。

                    </p>
                    <p>万物通理念：“安全、高效、创新、共赢</p>
                    <p>万物通愿景：利用数字化方式，不断探索物联网、大数据等技术在供应链领域的深度应用，赋能实体供应链转型升级，推动实体经济与数字经济的深度融合！共创新质生产力！</p>
                </div>
            </div>
            <ul class="one-center">
                <li class="item">
                    <h3 class="min-tit"><span>全品类</span></h3>
                    <span class="tit">品类齐全，货盘稳定</span>
                    <!-- <span class="tit">满足各行要求</span> -->
                    <span class="tit"><b>30000+</b>真实SKU商品</span>
                </li>
                <li class="item">
                    <h3 class="min-tit"><span>正品保障</span></h3>
                    <!-- <span class="tit">整合<b>1000+</b></span> -->
                    <span class="tit">授权品牌 源头厂家</span>
                    <span class="tit">所有授权链路齐全</span>
                </li>
                <li class="item">
                    <h3 class="min-tit"><span>全网比价</span></h3>
                    <!-- <span class="tit"><b>一键比价</b></span> -->
                    <span class="tit">渠道价格 一键比价</span>
                    <span class="tit">支持全网全渠道比价</span>
                </li>
                <li class="item">
                    <h3 class="min-tit"><span>API数据同步</span></h3>
                    <!-- <span class="tit"><b>API</b>一键接入</span> -->
                    <span class="tit">商品同步 订单回传</span>
                    <span class="tit"><b>7*12小时</b>售后服务</span>
                </li>
            </ul>
            <div class="one-botm">
                <div class="item">
                    <h3 class="min-tit"><span>我是谁？</span></h3>
                    <p>
                        二类电商优质供应商
                    </p>
                    <p>
                        供销一体化 +数字供应链
                    </p>
                </div>
                <div class="item">
                    <h3 class="min-tit"><span>为谁做？</span></h3>
                    <p>
                        银行、航空、政企
                    </p>
                    <p>
                        自营商城+私域商城
                    </p>
                </div>
                <div class="item">
                    <h3 class="min-tit"><span>做什么？</span></h3>
                    <p>
                        数实融合的供应链解决方案
                    </p>
                    <p>
                        实体供应链+数字化协同
                    </p>
                </div>
                <div class="item">
                    <h3 class="min-tit"><span>怎么做？</span></h3>
                    <p>
                        全品类商品供应
                    </p>
                    <p>
                        源头品牌/工+云仓物流
                    </p>
                </div>
            </div>
        </div>
        <!-- 关于万物通 e -->
        <!-- 公司文化 s -->
        <div class="culture ">
            <h3 class="title">公司文化</h3>
            <!-- <img src="../../assets/images/qiyewenhua.png" alt=""> -->
        </div>
        <!-- 公司文化 e -->
        <!-- 加入万物通 s -->
        <div class="join ">
            <h3 class="title">加入万物通</h3>
            <div class="en-center  center-text">
                <div class="tow">
                    <h5 class="title-tow">我要入驻</h5>
                    <ul class="left-ul">
                        <li>
                            <div class="left-li-num">{{ activeName[0].title }}</div>
                            <div class="left-li-text" @click="enterActiveFn(0, $event)">
                                <div class="item-text" v-for="(text, indexT) in activeName[0].item"
                                    :class="{ 'entActive': entActDat[0] == indexT }" :id=indexT>{{ text
                                    }}</div>
                            </div>
                        </li>
                        <li>
                            <div class="left-li-num">{{ activeName[1].title }}</div>
                            <div class="left-li-text" @click="enterActiveFn(1, $event)">
                                <div class="item-text cursor" v-for="(text, indexT) in activeName[1].item"
                                    :class="{ 'entActive': entActDat[1] == indexT }" :id=indexT>{{ text
                                    }}</div>
                            </div>
                        </li>
                        <li>
                            <div class="left-li-num">{{ activeName[2].title }}</div>
                            <div class="left-li-text" @click="enterActiveFn(2, $event)">
                                <div class="item-text cursor" v-for="(text, indexT) in activeName[2].item"
                                    :class="{ 'entActive': entActDat[2] == indexT }" :id=indexT>{{ text
                                    }}</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="declare  center-text ">
                <div class="title-dec">
                    <h3 class="title-tow">入驻流程</h3>
                </div>
                <div class="declare-item">
                    <div class="item" v-for="item in classifyData">
                        <div>{{ item.text }} <span>{{ item.titme }}</span></div>
                        <p>{{ item.towText }}</p>
                    </div>
                </div>
                <div class="btn-home cursor" @click="clickskip">立即入驻</div>
            </div>

        </div>
        <!-- 加入万物通 e -->
    </div>
    <bottomView></bottomView>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
const Router = useRouter()
const classifyData = ref([{
    text: '入驻申请',
    titme: '3-5分钟',
    towText: "登录后提交营业执照，法人经营者身份证明，店铺LOGO等"
}, {
    text: '等待审核',
    titme: '1-3个工作日',
    towText: "等待商服人员审核资料，所需时间1～3个工作日，请注意接收短信通知。"
}, {
    text: '进入洽谈',
    // titme: '',
    towText: "招商经理1V1服务，洽谈合作细节，签订合同"
}, {
    text: '开始合作',
    // titme: '',可自主产品上传，主动报品传商品后即可进行直播报品
    towText: `供应商合作后，平台商、
   分销商、项目合伙人合作后，可自主选品，API接入、同步产品等。`
},])
// 
const activeName = ref([{ title: '合作方式', item: ['供应商', '平台商', '分销商', '项目合作'], isShow: [false, false, false] },
{ title: '公司性质', item: ['生产厂商', '品牌商', '代理商', '其它'], isShow: [false, false, false] },
{ title: '业务类型', item: ['一件代发', '批量集采', '线下商超'], isShow: [false, false, false] }])
// 入驻材料
const entActDat = ref([-1, -1, -1])
const enterActiveFn = (index, e) => {
    entActDat.value[index] = e.target.id
}
// 
function clickskip() {
    window.open(`https://www.wwtscm.com/#/`)
}
// 
const goodsLogin = () => {
    window.open("https://xp.wwtscm.com/#/")
}
const shuzidap = () => {
    window.open(Router.resolve({ path: '/visual' }).href, '_blank');
}
</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

.aboutView {
    background-color: #FAFCFF;
    padding-bottom: 2vw;

    // 版心居中
    .center-text {
        width: 68%;
        margin: 0 auto;
    }

    .min-tit {
        span {
            background-image: url('../../assets/images/home-tbgc.png');
            background-repeat: no-repeat;
            background-position: left bottom;
            font-size: $title-font-size4;
            font-weight: 700;
            background-size: 100%;
        }

    }

    // 标题
    .title {
        font-size: $title-font-size1;
        font-weight: 700;
        text-align: center;
        margin: 3.5vw 0;

        &::after {
            display: block;
            content: '';
            width: 2.6vw;
            height: 0.4vw;
            background-color: $firm-color;
            margin: 0 auto;
            border-radius: 0.2vw;
            margin-top: 0.6vw;
        }
    }


    // 广告
    .banner {
        position: absolute;
        top: 0vw;
        width: 100%;
        height: 40vw;
        overflow: hidden;

        .video-home {
            width: 100%;
        }

        img {
            width: 100%;
            height: 40vw;
        }

        .banner-text {
            width: 23%;
            height: 100%;
            margin-left: 39%;
            position: absolute;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2;
            color: #fff;

            .h2 {
                display: flex;
                justify-content: center;

                span {
                    color: #fff;
                    background-image: url('../../assets/images/home-tbgc.png');
                    background-repeat: no-repeat;
                    background-position: left bottom;
                    background-size: 100% 0.2vw;
                    font-weight: 700;
                    font-size: $title-font-size1;
                    margin-bottom: 3vw;
                    letter-spacing: 0.3vw;
                }
            }

            p {
                font-size: $title-font-size3;
                font-weight: 700;
                letter-spacing: 0.3vw;
            }

            .banner-btn {
                display: flex;
                margin-top: 4vw;

                .el-button {
                    width: 7.7vw;
                    height: 2.19vw;
                    font-size: $title-font-size6;
                    border-radius: 1.6vw;
                    line-height: 3.13vw;
                    padding: 0;
                    color: #fff;
                    line-height: 2.19vw;
                    text-align: center;
                    border: #fff 0.1vw solid;

                    &:nth-child(1) {
                        background-color: rgba($color: $firm-color, $alpha: 0.8);
                    }

                    &:nth-child(2) {
                        background-color: rgba($color: $botton-bgc, $alpha: 0.8);
                        margin-left: 1vw;
                    }
                }
            }
        }
    }

    // 关于万物通
    .andConter {
        margin-top: 35.77vw;
        padding-top: 6vw;

        .intro-one {
            display: flex;
            padding: 0 1vw;

            img {
                width: 25.6vw;
                margin-right: 0.5vw;
                flex-shrink: 0;
            }

            .intro-right {
                padding: 0.3vw 1.5vw;

                h4 {
                    font-size: $title-font-size4;
                    margin: 1.2vw 0;
                    margin-bottom: 3vw;

                    span {
                        font-weight: 700;
                        background-image: url('../../assets/images/home-tbgc.png');
                        background-repeat: no-repeat;
                        background-position: left bottom;
                    }
                }

                p {
                    font-size: $title-font-size7;
                    text-indent: 2em;
                    color: #666;
                    margin-bottom: 0.6vw;
                    line-height: 1.8;
                }
            }


        }

        .one-center {
            transform: translateY(-10%);
            width: 66.6vw;
            height: 7.4vw;
            background-color: #fff;
            display: flex;
            padding: 1vw 7.5vw;
            box-shadow: $box-shadow-all;
            border-radius: 0.5vw;

            .item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-right: #D9D9D9 0.1vw solid;


                &:nth-child(4) {
                    border: none;
                }

                .min-tit {
                    margin-bottom: 1vw;
                }

                .tit {
                    font-size: $title-font-size7;
                    color: #666;
                    line-height: 1.5;

                    b {
                        color: $firm-color;
                    }
                }
            }
        }

        .one-botm {
            width: 65.1vw;
            height: 10.67vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .item {
                width: 15.1vw;
                height: 100%;
                background-color: #d7d6d6;
                border-radius: 0.5vw;
                color: #fff;
                padding: 0.8vw;

                &:nth-child(1) {
                    background-image: url('../../assets/images/andMy-one2.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                &:nth-child(2) {
                    background-image: url('../../assets/images/andMy-one3.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                &:nth-child(3) {
                    background-image: url('../../assets/images/andMy-one4.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                &:nth-child(4) {
                    background-image: url('../../assets/images/andMy-one5.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .min-tit {
                    color: #fff;
                    margin-bottom: 0.5vw;
                }

                p {
                    font-size: $title-font-size7 ;
                    line-height: 1.7;
                }
            }
        }
    }

    // 公司文化
    .culture {
        height: 46.4vw;
        padding: 2vw 0;
        margin-top: 3vw;
        background-image: url('../../assets/images/qiyewenhua.png');
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 100%;

        .title {
            margin-top: 0;
            background-color: transparent;
        }
    }

    // 加入万物通
    .join {
        background-color: #FAFCFF;

        .en-center {
            background-color: #fff;
            margin-top: 2.5vw;
            display: flex;
            font-size: $title-font-size7;
            border: #f1f1f1 0.1vw solid;
            border-radius: 0.5vw;
            margin-bottom: 1.2vw;

            .title-tow {
                font-size: $title-font-size8;
            }

            .tow {
                background-color: #fff;
                border-radius: 1vw;
                padding: 2.1vw;
                margin-right: 1.2vw;

                h5 {
                    margin-bottom: 3.2vw;
                }


                .left-ul {
                    li {
                        display: flex;
                        margin-bottom: 1.2vw;
                        align-items: center;

                        .left-li-num {
                            font-size: $title-font-size5 ;
                        }

                        .left-li-text {
                            display: flex;

                            .entActive {
                                background-color: rgba($color: $firm-color, $alpha: 0.2) !important;
                            }

                            .item-text {
                                width: 7.5vw;
                                height: 2.5vw;
                                background-color: #f0f3fa;
                                border-radius: 0.4vw;
                                margin-left: 1.2vw;

                                text-align: center;
                                line-height: 2.5vw;
                                font-size: $title-font-size6;
                            }
                        }
                    }
                }
            }
        }

        .declare {
            background-color: #fff;
            border: #f1f1f1 0.1vw solid;
            border-radius: 0.73vw;
            padding: 1vw;
            margin-bottom: 4vw;

            .title-dec {
                font-size: $title-font-size8;
                margin-bottom: 1.6vw;
            }

            .declare-item {
                display: flex;
                justify-content: space-evenly;
                // width: 70vw;

                .item {
                    width: 16.5vw;
                    height: 7.8vw;
                    background-color: #fff;
                    border-radius: 0.73vw;
                    padding: 0.6vw;
                    border: #f1f1f1 0.1vw solid;
                    margin-right: 0.5vw;

                    div {
                        font-size: $title-font-size6;
                        margin-bottom: 1vw;
                        font-weight: 700;

                        span {
                            display: inline-block;
                            font-size: $title-font-size7 ;
                            color: $firm-color;
                            background-color: #dfeafe;
                            padding: 0 0.3vw;
                            border-radius: 0.1vw;
                            margin-left: 0.5vw;
                        }
                    }

                    p {
                        color: #666;
                        font-size: $title-font-size7;
                    }
                }
            }

            .btn-home {
                width: 9.6vw;
                height: 2.6vw;
                background-color: $firm-color;
                font-size: $title-font-size6;
                line-height: 2.6vw;
                text-align: center;
                border-radius: 0.5vw;
                margin: 2vw auto;
                border: #f1f1f1 0.1vw solid;
                color: #fff;
            }
        }
    }
}
</style>